<template>
  <div class="notice-list">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="item"
    >
      <el-image
        :src="item.icon"
        fit="fill"
        style="width: 18px;height: 18px;"
      >
        <div slot="error" class="image--error" />
      </el-image>
      <div v-if="item.content" class="notice-text content">{{ item.content }}</div>
      <div v-else class="item__default content">
        <div class="item__default--placeholder" />
        <div class="item__default--placeholder" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
.notice-list {
  .item {
    display: flex;
    margin-bottom: 10px;
    .content {
      flex: 1;
      margin-left: 8px;
    }

    .notice-text {
      word-break: break-all;
      color: #303133;
      font-size: 14px;
      font-weight: 400;
      line-height: 18px;
      font-family: HONOR Sans CN, HONOR Sans CN;
    }

    &__default {

      &--placeholder {
        //padding: 3px 0;
        margin: 3px 0;
        height: 12px;
        background-color: #E6E8EB;
        border-radius: 3px;
      }
    }
  }
}

::v-deep(.el-image) {
  .image--error {
    width: 100%;
    height: 100%;
    background-color: #E6E8EB;
    border-radius: 3px;
  }
}
</style>
